<template>
	<view class="page">

		<view v-if='myCartList.length==0'>
			<image src="/static/img/carpicNothing.png" class="nothing"></image>
			<text class="cart-content">购物车空空如也</text>
			<view class="goShopping" @click="tobuy">
				<text>去选购</text>
			</view>
		</view>
		<view class="order-list">
			<view class="order-list-item" v-for="(item,index) in myCartList" :key="index">
				<view class="circle" @click="isChecked(item,index)">
					<view class="check" v-show='item.checked==1'></view>
				</view>
				<image :src="item.bizpro_imgurl" class="goods" @click="toDetail"></image>
				<view class="goods-info">
					<text class="name">{{item.bizpro_name}}</text>
					<view class="tag">
						<text class="tag-one" v-for="(lb,i) in item.bizpro_label" :key='i' v-if="i<2">{{lb}}</text>
						<!-- <text class="tag-one">{{item.bizpro_label[0]}}</text>
						<text class="tag-two">{{item.bizpro_label[1]}}</text> -->
					</view>
					<text class="size" v-if>{{item.bizpro_spec_value1}}.{{item.bizpro_spec_value2}}</text>
					<text class="price">¥ {{item.bizpro_saleprice}}</text>
					<!-- <text class="original-price">原价{{item.bizpro_oldprice}}</text> -->
				</view>
					<view class="number">
						<text @click="reduce(item,index)" :class="item.buy_num === 1?'no-click':''">-</text>
						<text style="border-left: none; border-right: none;">{{item.buy_num}}</text>
						<text @click="add(item,index)">+</text>
					</view>
			</view>
		</view>
		<view class="bottom" v-if='myCartList.length!=0'>
			<view class="all-checked-wrap" @click="allChecked">
				<view class="all-checked" v-if="isAllChecked"></view>
			</view>
			<text class="select-all-text">全选</text>
			<text class="total-price">¥{{total_price}}</text>
			<!--未授权的时候展示  -->
				<view :class="[!grep?'confirm-pay':'confirm-paygrep']" @click="confirmPay" >
					<text>确认支付</text>
				</view>
		</view>
	</view>
	
</template>

<script>
	import {
		request
	} from '@/request/index.js';
	import Authority from '@/components/authorityPopup.vue'
	export default {
		onLoad(){
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
					
			this.$hshare.gethShareParam(url+'/#/pages/cart/Cart')
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
		},
		onShow: function(options) {
			
			
			
			var _token = uni.getStorageSync('token')
			if(_token==null||_token==''){
				//微信登录授权
				this.toWxLogin()
			 }else{
				 this.showAuthority = false;
			 }
			 var _memberinfo = uni.getStorageSync('member')
			 console.log(_memberinfo,'------------------_memberinfo---------------')
			 if(_memberinfo!=null&&_memberinfo!=''&&_memberinfo!= undefined&&JSON.stringify(_memberinfo) != "{}" ){
				 if(_memberinfo.phone==null||_memberinfo.phone==''||typeof(_memberinfo.phone)=='undefined'||_memberinfo.phone==0){
					this.myCartList.length=0 
						//去注册
						uni.showToast({
						   title:'您尚未注册，正在前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
							
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return 
				 }else{
				 	this.getMyCartList();
				 }
			 }
		
		
		},
		components: {
					 Authority  
		},
		data() {
			return {
				isAllChecked: false,
				cart: [],
				myCartList: [],
				id: '',
				total_price: 0,
				shopCarIdArray: [],
				cartChecked:0,
				grep:true,//是否有购物车id状态
				showAuthority:false,//微信授权状态
				appId:'wx91063cc93c2cffbf',
				// login:false\
				memberInfo:''
			}
		},
		methods: {
			tobuy(){
				uni.switchTab({
					url:'/pages/category/Category'
				})
			},
			isChecked(item, index) {
				if (item.checked == 1) {
				
					item.checked = 2
					//确认支付变成灰色
					this.grep=true
					this.total_price = (parseFloat(this.total_price) - parseFloat(item.buy_num * item.bizpro_saleprice)).toFixed(2)
					//1是选中  2是未选中   把1改成2  对应的 删除这个shopcarId数组里里  减少
					this.shopCarIdArray.forEach((res, key) => {
						//遍历的id 与购物车id是否相同  相同删除
						if (item.id == res) {
							this.shopCarIdArray.splice(key, 1);
						}
						
					})
				} else {
					//确认支付变成黄色
					this.grep=false
					item.checked = 1
					this.total_price = (parseFloat(this.total_price) + parseFloat(item.buy_num * item.bizpro_saleprice)).toFixed(2)
					//把这个id加数组里 追加
					this.shopCarIdArray.splice(-1, 0, item.id)
					
				}

				this.$forceUpdate()
			},
			reduce(item, index) {
				if (item.buy_num > 1) {
					item.buy_num--;

					this.$api.cartSave({
							bizpro_id: item.bizpro_id,
							buy_num: item.buy_num,
							standard_value1: item.bizpro_spec_value1,
							standard_value2: item.bizpro_spec_value2
						})
						.then(res => {
							if (item.checked == 1) {
								this.total_price = (parseFloat(this.total_price) - parseFloat(item.bizpro_saleprice)).toFixed(2)
							}

						})
						.catch(res => {

						})

				} else if (item.buy_num == 1) {
					//删除购物车的s商品
					this.$api.cartDelete({
							id: item.id
						})
						.then(res => {
						
							uni.showToast({
								title: '删除成功',
							})
							this.getMyCartList()
						})
				}
			},
			add(item, index) {
				item.buy_num++;
				this.$api.cartSave({
						bizpro_id: item.bizpro_id,
						buy_num: item.buy_num,
						standard_value1: item.bizpro_spec_value1,
						standard_value2: item.bizpro_spec_value2
					})
					.then(res => {
						if (item.checked == 1) {
							this.total_price = (parseFloat(this.total_price) + parseFloat(item.bizpro_saleprice)).toFixed(2)
						}

					})
					.catch(res => {

					})
			},
			//全选
			allChecked() {
				this.isAllChecked = !this.isAllChecked;
				let mark = this.isAllChecked ? 1 : 2
				let countPirce = 0;
				this.myCartList.forEach((res, key) => {
					res.checked = mark
					countPirce += parseFloat(res.buy_num * res.bizpro_saleprice)
					//判断  购物车id 是否为空  空的话  直接 追加数组  反之 遍历
					if (this.shopCarIdArray == '') {
						this.shopCarIdArray.splice(-1, 0, res.id);
					} else {
						if (mark == 1) {
							//先看数组里是否有这个购物车id 没有则追加
							this.shopCarIdArray.forEach((item, key) => {
								//遍历的id 与购物车id是否相同  相同不追加  不相同追加
								if (res.id != item) {
									this.shopCarIdArray.splice(-1, 0, res.id);
								}
							})
						} else {
							this.shopCarIdArray.forEach((s, key) => {
								//遍历的id 与购物车id是否相同  相同删除
								if (res.id == s) {
									this.shopCarIdArray.splice(key, 1);
								}
							})
						}
					}

				})
				if (this.isAllChecked) {
					//false  是可以点击全选
					this.grep = false
					
					this.total_price = countPirce.toFixed(2)
				} else {
					this.grep = true
					this.total_price = parseFloat(0).toFixed(2)
				}
				//获取所有购物车id  添加数组
				this.$forceUpdate()
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/goods/GoodsDetail'
				})
			},
			// 获取我的购物车列表
			getMyCartList() {
				console.log('---购物车')
				this.$api.getMyCartList({}).then(res => {
					this.myCartList = res.data.data;
					let countPirce = 0;
					this.myCartList.forEach((item, index) => {
						if (item.checked == 1) {
							countPirce += parseFloat(item.buy_num * item.bizpro_saleprice)
						}
					})
					this.total_price = countPirce.toFixed(2)
				})
			},
			//微信授权登录 跳转页面
			toWxLogin(){
				//获取信息存缓存
				var t=this;
			
				var _member = uni.getStorageSync("member")
				if(_member!=''&&_member!=null&&JSON.stringify(_member) != "{}"){
					console.log(_member)
				}else{
					
					this.getCode();
				}
				
			},
			/**
			 * 根据参数名 获取 URL 路径中的参数  
			 * @param {String} name 要读取的参数名称  
			 */  
			getUrlParam(){
				  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')  
				  let url = window.location.href.split('#')[0]   
				  let search = url.split('?')[1]  
				  if (search) {  
				    var r = search.substr(0).match(reg)  
				    if (r !== null) return unescape(r[2])  
				    return null  
				  } else {  
				    return null  
				  }  
			},
			//获取code
			getCode() {
				var code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
				var local = this.$api.wxurl;  //这个地方是微信公众平台网页授权里面配置的域名，也是服务器的域名，把打包后的static和index放到webapps的文件夹下面。格式为域名+文件夹名称
				
				if (code == null || code === '') {
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
						'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect'
						
				} else {
					/* 调用后台接口 获取token  是否登录过App的状态 */
					this.$api.getMemeberInfo({code:code}).then(res => {
						
								
					})
				
				}
			},
			//点击确认支付
			confirmPay() {
				
				var total_num = this.shopCarIdArray.length; //6 
				

				this.$api.getCheckOrder({shopcarId:this.shopCarIdArray,total_num:total_num}).then(res => {
					this.order_id = res.data.orderId;

					uni.navigateTo({
						url: '/pages/order/OrderConfirm?order_id=' + this.order_id
					})
				})
			},
		
		}
	}
</script>

<style>
	.page {
		/* padding-top: calc(var(--status-bar-height)); */
		width: 100%;
		height: 100vh;
		display: table;
		background-color: #f7f7f7;
	}

	.order-list {
		width: 750rpx;
		/* margin-top: 50rpx; */
		margin-bottom: 130rpx;
		margin-top: (--status-bar-height));
	}

	.order-list-item {
		display: flex;
		width: 750rpx;
		height: 218rpx;
		overflow: auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 1);
		margin-top: 20rpx;
		position: relative;
	}
	.order-list-item:last-child{
		margin-bottom: 30rpx;
	}
	.circle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgba(204, 204, 204, 1);
		border-radius: 50%;
		margin-left: 20rpx;
		margin-top: 94rpx;
	}

	.check {
		width: 22rpx;
		height: 22rpx;
		background: rgba(254, 177, 71, 1);
		border-radius: 50%;
	}

	.goods {
		width: 160rpx;
		height: 160rpx;
		margin-left: 30rpx;
		margin-top: 29rpx;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		width: 450rpx;
	}

	.name {
		width: 420rpx;
		display: block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
		margin-top: 25rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.tag {
		display: flex;
		margin-left: 30rpx;
	}

	.tag-one,
	.tag-two {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		width: auto;
		height: 28rpx;
		padding:0px 6px;
		background: rgba(222, 245, 255, 1);
		border: 1rpx solid rgba(185, 233, 255, 1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72, 180, 231, 1);
		margin-right:6px;
	}

	.tag-two {
		margin-left: 30rpx;
	}

	.price {
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
		margin-left: 30rpx;
		margin-top: 0rpx;
	}

	.original-price {
		display: block;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-decoration: line-through;
		margin-left: 30rpx;
	}

	.size {
		display: block;
		font-size: 22rpx;
		width: 250rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-left: 30rpx;
		margin-top: 10rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.number {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.number text {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 62rpx;
		height: 50rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
		margin-top: 28rpx;
	}
	.number text:nth-child(2) {
		font-size: 30rpx;
	}
	.number text:last-child {
		border-radius:0 10rpx 10rpx 0;
	}
	.bottom {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 100rpx;
		width: 750rpx;
		height: 112rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid #eee;
	}

	.all-checked-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgba(204, 204, 204, 1);
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.all-checked {
		width: 22rpx;
		height: 22rpx;
		background: rgba(254, 177, 71, 1);
		border-radius: 50%;
	}

	.select-all-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: rgba(153, 153, 153, 1);
		font-weight: 500;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.total-price {
		position: absolute;
		right: 400rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 77, 77, 1);
		margin-left: 95rpx;
	}

	.confirm-pay {
		position: absolute;
		right: 20rpx;
		width: 324rpx;
		height: 70rpx;
		border-radius: 6rpx;
		background: rgba(253, 149, 47, 1);
		
	}
	.confirm-paygrep {
		position: absolute;
		right: 20rpx;
		width: 324rpx;
		height: 70rpx;
		border-radius: 6rpx;
		background: #d5d5d6;
	}
	.confirm-paygrep text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-left: 103rpx;
		}
	.confirm-pay text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-left: 103rpx;
	}

	.no-click {
		color: #ccc;
		border-radius: 10rpx 0 0 10rpx;
	}
	.nothing {
		display: block;
		width: 598rpx;
		height: 480rpx;
		margin-left: 76rpx;
		margin-top: 322rpx;
	}
	.cart-content {
		display: block;
		height: 36rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		line-height: 36rpx;
		margin-top: 40rpx;
		margin-left: 243rpx;
	}
	.goShopping {
		width: 324rpx;
		height: 70rpx;
		line-height: 60rpx;
		background: rgba(254,177,71,1);
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(179,179,179,0.45);
		border-radius: 6rpx;
		margin-top: 120rpx;
		margin-left: 213rpx;
	}
	.goShopping text {
		width: 87rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
		line-height: 36rpx;
		margin-left: 118rpx;
	}
</style>
